<template>
    <view class="taobao-page">
        <!-- 商品轮播图 -->
        <u-swiper :list="goods.urlLink.split(',')" radius="0" height="375" @click="previewImage"></u-swiper>

        <!-- 商品基本信息 -->
        <view class="goods-info">
            <!-- <view class="price" v-if="isVip">
                          <text>¥{{goods.vipPrice}}</text>
                          <text class="original">¥{{goods.price}}</text>
                        </view>
                        <view class="price" v-else>
                          <text>¥{{goods.price}}</text>
                        </view> -->
            <view class="title">{{ goods.name }}</view>
            <view class="price">
                <text>¥{{ goods.price }}</text>
                <text class="vip-price">VIP：¥{{ goods.vipPrice }}</text>
            </view>

            <view class="sales">已售{{ goods.num }}件</view>
            <view class="desc">{{ goods.info }}</view>
        </view>

        <!-- 商品详情 -->
        <view class="detail-section">
            <view class="title">商品详情</view>
            <rich-text :nodes="goods.infoDesc"></rich-text>
        </view>
        <!-- 评论 -->
        <view class="detail-section">
            <view class="title">评论</view>
            <view class="item" style="margin-bottom: 10rpx;" v-if="postList.length > 0">
                <!--                    <view class="top">-->
                <!--                        <view style="font-size: 30rpx;margin-bottom: 20rpx;">评价</view>-->
                <!--                        <view style="font-size: 26rpx;color: #999;margin-bottom: 20rpx;" @click="goComment">查看全部 > </view>-->
                <!--                    </view>-->
                <view class="info-item" v-for="(item, index) in postList" :key="index">
                    <!-- 顶部头像 -->
                    <view class="dis_f_sb_c" style="flex: 1;">
                        <view class="info-item-top">
                            <u-avatar :src="item.userVo.avatar"></u-avatar>
                            <view class="nickname-box">
                                <view style="margin-right: 10rpx;">{{ item.userName || item.userVo.nickName }}</view>
                                <view class="createTimeStr"> {{ item.createTimeStr }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 发布的内容 -->
                    <view class="content">
                        <view class="title">
                            <u-rate readonly :count="5" v-model="item.level" activeColor="#F56C6C"></u-rate>
                            <view class="level" v-if="item.level == 1">非常差</view>
                            <view class="level" v-if="item.level == 2">差</view>
                            <view class="level" v-if="item.level == 3">一般</view>
                            <view class="level" v-if="item.level == 4">满意</view>
                            <view class="level" v-if="item.level == 5">非常满意</view>
                        </view>
                        <view class="content-text"> {{ item.title }}</view>
                        <!-- 图片 -->
                        <view class="img" v-if="item.imgUrl">
                            <view v-for="(url, index) in item.imgUrl.split(',').slice(0, 5)" :key="index"
                                  style="margin-right: 10rpx;position: relative;">
                                <image :src="url" style="height: 120rpx;width:120rpx;border-radius: 10rpx;"
                                       @click="handlePostImg(url, item.imgUrl.split(','))"></image>
                                <view class="more" v-if="item.imgUrl.split(',').length > 5 && index == 4"
                                      @click="handlePostImg(url, item.imgUrl.split(','))">
                                    +{{ item.imgUrl.split(",").length - 5 }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view style="margin: 20rpx 10rpx;">
                        <u-line v-if="postList.length -1 != index"></u-line>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="footer-bar">
            <u-button
                customStyle="border: #999999 0rpx dashed;font-size: 32rpx;height: unset;width: unset;justify-content:left;"
                @click="goKf">
                <view class="contact">
                    <u-icon name="server-fill" size="24" color="#666"></u-icon>
                    <text>客服</text>
                </view>
            </u-button>
            <button class="btn cart" @click="addToCart">
                <text>加入购物车</text>
            </button>
            <button class="btn buy" @click="buyNow">
                <text>去结算</text>
            </button>
        </view>

        <u-modal :show="show" title="订单确认" showCancelButton @cancel="show = false" @confirm="handleConfirm">
            <u--form labelPosition="left" labelWidth="auto" :model="model1" :rules="rules" ref="uForm">

                <u-form-item prop="userInfo.phone" ref="item1">
                    <view class="item-box">
                        <!-- <view class="logo">
                                                </view> -->
                        <u-icon name="phone" :color="mainColor" size="28"></u-icon>
                        <u-input v-model="model1.userInfo.phone" placeholder="请填写手机号" border="none"></u-input>
                    </view>
                </u-form-item>
                <u-form-item prop="userInfo.address" ref="item1">
                    <view class="item-box">
                        <u-icon name="home" :color="mainColor" size="28"></u-icon>
                        <view class="select-box">
                            <u-input v-model="model1.userInfo.address" placeholder="请填写收货地址"
                                     border="none"></u-input>
                            <view @click="handleGetAddress" class="get-address">
                                <u-icon name="map-fill" color="#EB6121" size="20"></u-icon>
                            </view>
                        </view>
                    </view>
                </u-form-item>
                <view class="item-box">
                    <u-icon name="clock" :color="mainColor" size="24"></u-icon>
                    <view class="select-box" @click="showTime = true">
                        <text style="color: #303133; font-size: 30rpx" v-if="model1.userInfo.deliveryTime">
                            {{ model1.userInfo.deliveryTime }}
                        </text>
                        <text style="color: #c0c4cc; font-size: 30rpx" v-else>请选择上门时间</text>
                        <u-icon name="arrow-right" color="#E9EAEB"></u-icon>
                    </view>
                </view>
                <u-form-item>
                    <view class="form-item">
                        <view class="item-box">
                            <u-icon name="zhifubao" :color="mainColor" size="28"></u-icon>
                            <view class="select-box" @click="showPay = true">
                                <text style="color: #c0c4cc; font-size: 30rpx" v-if="!payWay">付款方式</text>
                                <text style="font-size: 30rpx" v-else>{{ payWay }}</text>
                                <text style="color: #999"></text>
                                <view class="pay-box">
                                    <u-icon name="arrow-right" color="#E9EAEB"></u-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </u-form-item>
                <!-- <u-form-item label="余额抵扣：" ref="item1">
                                  <view class="dis_f_sb_c">
                                    <u-switch v-model="model1.userInfo.isDeduction" @change="change"></u-switch>
                                    <view style="color:#999;font-size: 26rpx;">当前余额: {{myInfoVo.amount}}</view>
                                  </view>
                                </u-form-item> -->
            </u--form>
        </u-modal>
        <u-picker ref="uPicker" :show="showTime" :columns="columns" @change="changeHandler" @cancel="showTime=false"
                  @confirm="confirm"></u-picker>
        <!-- 驿站选择器 -->
        <u-picker :show="showStation" :columns="stationList" keyName="nickName" :confirmColor="mainColor"
                  @close="showStation = false" @cancel="showStation = false" :closeOnClickOverlay="true"
                  @confirm="handleStationConfirm"></u-picker>
        <!-- 付款方式选择器 -->
        <u-picker :show="showPay" :columns="payList" keyName="label" :confirmColor="mainColor" @close="showPay = false"
                  @cancel="showPay = false" :closeOnClickOverlay="true" @confirm="handlePayConfirm"></u-picker>
        <u-popup :show="showOrder" closeable @close="showOrder=false" mode="bottom">
            <view class="p_20">
                <view class="dis_f_c_c">订单确认</view>
                <u--form labelPosition="left" labelWidth="90" :model="model1" :rules="rules" ref="uForm">
                    <u-form-item prop="userInfo.phone" ref="item1" label="手机号">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.phone" placeholder="请填写手机号" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameIdNo" ref="item1" label="游戏ID">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.gameIdNo" placeholder="请填写游戏ID"
                                     border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameAreaType" ref="item1" label="游戏区服">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-radio-group v-model="model1.userInfo.gameAreaType" placement="row" @change="groupChange">
                                <u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist"
                                         :key="index" :label="item" :name="item">
                                </u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameIdNo" ref="item1" label="优惠券">
                        <!--                <view class="dis_f_l_c" @click="showCouponPopup=true">
                                                        <view class="m_r_5">{{checkCouponName||'请选择优惠券'}}</view>
                                                        <u-icon name="arrow-right" size="20"></u-icon>
                                                    </view>-->
                        <u-cell-group :border="false">
                            <u-cell isLink :value="checkCouponName" @click="showCouponPopup=true"></u-cell>
                        </u-cell-group>
                    </u-form-item>
                    <u-form-item prop="userInfo.remark" ref="item1" label="备注">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.remark" placeholder="请填写备注" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="isWaiter" ref="item1" label="服务人员">
                        <u-radio-group v-model="isWaiter" placement="row">
                            <u-radio :customStyle="{marginRight: '8px'}" label="打手抢单" name="1"></u-radio>
                            <u-radio :customStyle="{marginRight: '8px'}" label="指定打手" name="2"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item prop="isWaiter" ref="item1" label="选择打手" v-if="isWaiter==2"
                                 @click="showWaiter = true">
                        <u-input v-model="model1.userInfo.waiterName" placeholder="请选择打手" border="none"
                                 disabled></u-input>
                    </u-form-item>
                    <u-form-item prop="isWaiter" ref="item1" label="支付方式">
                        <u-radio-group v-model="payType" placement="row">
                            <u-radio :customStyle="{marginRight: '8px'}" label="微信" name="1"></u-radio>
                            <u-radio :customStyle="{marginRight: '8px'}" label="余额" name="2"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                </u--form>
                <view class="m_t_10 m_b_10">
                    <u-button type="primary" @click="handleConfirm">提交</u-button>
                </view>
            </view>
        </u-popup>
        <!--    <u-picker :show="showWaiter" :columns="waiterList" keyName="nickName" @cancel="showWaiter = false" @confirm="handleWaiter"></u-picker>-->
        <u-popup :show="showCouponPopup" mode="bottom" :round="10" :safeAreaInsetBottom="true" closeable
                 @close="showCouponPopup = false">
            <view class="coupon-container">
                <!-- 顶部标题 -->
                <view class="header">
                    <text class="subtitle c_0">优惠券</text>
                </view>

                <!-- 优惠券列表 -->
                <view class="coupon-list" v-if="couponList.length > 0">
                    <u-radio-group v-model="couponId" placement="column" @change="handleCouponChange">
                        <view v-for="(item, index) in couponList" :key="index" class="coupon-item"
                              @click="handleCoupon(item.couponId,item.amount)">
                            <!-- 左侧金额区域 -->
                            <view class="coupon-left">
                                <text class="amount">{{ item.amount }}</text>
                                <text class="unit">元</text>
                                <text class="condition">满{{ item.conditionAmount }}元可用</text>
                            </view>

                            <!-- 右侧信息区域 -->
                            <view class="coupon-right">
                                <text class="name">{{ item.name }}</text>
                                <!-- <text class="time">有效期: {{item.startTime}}至{{item.endTime}}</text> -->
                                <text class="scope">适用范围: {{ item.remark }}</text>
                                <!--                                <text class="scope" v-if="isGroup? item.amount >= itemData.amount:item.amount >= chooseTogether.amount ">不可用原因: {{temData.type == 1?"支付金额需大于优惠券金额":"仅普通拼团可用"}}</text>-->
                            </view>
                            <u-radio activeColor="#3C9CFF" :customStyle="{marginBottom: '8px'}" label=" "
                                     :name="item.couponId">
                            </u-radio>
                            <!-- 优惠券装饰元素 -->
                            <view class="coupon-corner"></view>
                            <view class="coupon-dots">
                                <view class="dot" v-for="(dot, i) in 10" :key="i"></view>
                            </view>
                        </view>
                    </u-radio-group>
                </view>
                <view v-else style="margin-bottom: 30rpx;">
                    <s-empty text="暂无可用优惠券"/>
                </view>
                <view class="footer">
                    <u-button type="primary" @click="submitPintuan">确定</u-button>
                </view>
            </view>
        </u-popup>
        <u-popup :show="showWaiter" mode="bottom" :round="10" :safeAreaInsetBottom="true" closeable
                 @close="showCouponPopup = false">
            <view class="p_10 dis_f_c_c">选择打手</view>
            <view>
                <u-sticky bgColor="#fff">
                    <view class="p_20" >
                        <u-search placeholder="请输入打手名字" :clearabled="true" :showAction="false"
                                  v-model="queryObj.nickName" @search="handleSearch" @clear="handleSearch"></u-search>
                    </view>
                </u-sticky>
                <view class="m_t_10" style="max-height: 80vh;overflow: auto">
                <!-- 人员列表 -->
                <view v-for="(waiter, index) in list" :key="index" class="waiter-card" >
                    <!-- 左侧头像区域 -->
                    <view class="dis_f_l_c">
                        <view class="avatar-container">
                            <!-- <image class="avatar" :src="waiter.avatar" mode="aspectFill" lazy-load /> -->
                            <u-avatar size="60" :src="waiter.avatar" shape="square"></u-avatar>
                            <!-- <icon v-if="waiter.isOnline" type="success" size="16" color="#07C160" class="online-icon" /> -->
                        </view>

                        <!-- 中间信息区域 -->
                        <view class="info-container">
                            <view class="dis_f_l_c">
                                <view class="name m_r_5">{{ waiter.nickName }}</view>
                                <u-tag v-if="waiter.dsVipName" :text="waiter.dsVipName" size="mini" type="info" plain
                                       plainFill></u-tag>
                            </view>
                            <!--                    <text class="title">{{ waiter.gameName || "" }}</text>-->
                            <text class="rate">{{ waiter.gameName || "" }} {{ waiter.gameName&& waiter.allOrder ? '|' : '' }} 已服务订单:{{ waiter.allOrder }}</text>
                            <text class="title">{{ waiter.info || "" }}</text>
                        </view>
                    </view>
                    <view class="dis_f_r_c">
                        <!-- 右侧按钮区域 -->
                        <button class="book-btn" @click.stop="handleChoose(waiter)">
                            选择
                        </button>
                    </view>
                </view>
                <view class="" v-if="list.length==0">
                    <s-empty/>
                </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    getByKeyApi,
    getGoodsApi,
    addCartApi,
    createOrderApi,
    getLastOrderApi,
    getTimeApi,
    payApi,
    getStationListApi,
    addOrderApi,
    postAddOrderApi,
    getUserListApi,
    getPostListApi,
    postAddOrderTopUpApi,
} from "@/sheep/api/index.js";
import {getMyInfoApi} from "@/sheep/api/baseApi.js";
import {getAddress} from "@/sheep/utils/common.js";
import {xcxTopUp, subscribe} from "@/sheep/utils/wxUtil";
import {myMixins} from "@/mixins/myMixins";

export default {
    data() {
        return {
            queryObj:{
                nickName:'',
                isWaiter: "1",
                status: "0",
            },
            list:[],
            payType: "1",
            showCouponPopup: false,
            couponList: [],
            couponId: null,
            checkCouponName: "请选择优惠券",
            showWaiter: false,
            showOrder: false,
            radiolist: [],
            goods: {
                goodsId: "",
                name: "",
                price: 0,
                vipPrice: 0,
                num: 0,
                urlLink: "",
                info: "",
                infoDesc: "",
            },
            quantity: 1,
            isVip: false,
            show: false,
            myInfoVo: {},
            model1: {
                userInfo: {
                    phone: "",
                    gameIdNo: "",
                    remark: "",
                    gameAreaType: "",
                },
            },
            isWaiter: "1", //1:打手抢单 2指定打手
            rules: {
                "userInfo.phone": {
                    type: "string",
                    required: true,
                    message: "请输入手机号",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameIdNo": {
                    type: "string",
                    required: true,
                    message: "请输入游戏ID",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameAreaType": {
                    type: "string",
                    required: true,
                    message: "请选择游戏区服",
                    trigger: ["blur", "change"],
                },
            },
            showStation: false,
            stationList: [],
            mainColor: "#EB6121", // 主题色
            showPay: false,
            payWay: "",
            payList: [
                [
                    {
                        label: "微信支付",
                        id: 1,
                    },
                    {
                        label: "余额支付",
                        id: 2,
                    },
                ],
            ],
            payWayId: null,
            showTime: false,
            columns: [[], []],
            columnData: [[], []],
            waiterList: [],
            postList: [],
        };
    },
    onLoad(options) {
        this.goods.goodsId = options.goodsId;
        this.getGoods();
        this.getPostList();
        // this.getTime();
        // this.getStationList(); // 获取驿站列表
        // this.payWay = this.payList[0][0].label;
        // this.payWayId = this.payList[0][0].id;
    },
    methods: {
        getPostList() {
            getPostListApi({watchId: this.goods.goodsId}).then((res) => {
                if (res.code == 200) {
                    this.postList = res.rows;
                }
            });
        },
        handlePostImg(url, urlList) {
            uni.previewImage({
                current: url,
                urls: urlList,
            });
        },
        handleCouponChange(e) {
            this.couponId = e;
            this.amount = this.couponList.find((item) => item.couponId == e).amount;
        },
        handleCoupon(couponId, amount) {
            this.amount = amount;
            if (couponId == this.couponId) {
                this.couponId = null;
            } else {
                this.couponId = couponId;
            }
        },
        submitPintuan() {
            this.checkCouponName = "-" + this.amount;
            this.showCouponPopup = false;
        },
        getWaiterList() {
            const query = {
                isWaiter: "1",
                status: "0",
                typeIds: this.goods.oneTypeId,
            };
            getUserListApi(query).then((res) => {
                this.waiterList = [res.rows];
                console.log(this.waiterList);
            });
        },
        handleWaiter(e) {
            this.model1.userInfo.waiterName = e.value[0].nickName;
            this.model1.userInfo.waiterId = e.value[0].userId;
            this.showWaiter = false;
        },
        groupChange(n) {
            this.model1.userInfo.gameAreaType = n;
        },
        async getGoods() {
            let res = await getGoodsApi(this.goods.goodsId);
            this.goods = res.data;
            this.couponList = res.data.couponVoList;
            this.goods.infoDesc = this.goods.infoDesc.replace(
                /<img/g,
                '<img style="width:100%"'
            );
            this.radiolist = res.data.gameArea.split("-");
            this.model1.userInfo.goodsId = res.data.goodsId;
            // this.getWaiterList();
            this.getList();
        },

        previewImage(index) {
            uni.previewImage({
                current: index,
                urls: this.goods.images,
            });
        },

        addToCart(item) {
            let cartForm = {
                goodsMallId: this.goods.goodsId,
                isAdd: 1,
            };
            addCartApi(cartForm).then((res) => {
                if (res.code == 200) {
                    uni.showToast({
                        title: "已加入购物车",
                        icon: "success",
                    });
                }
            });
        },

        buyNow() {
            // uni.switchTab({
            //   url: "/pages/cart/index",
            // });
            // this.show = true;
            this.showOrder = true;
            // this.getLast();
            this.getMyInfo();
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.isVip = res.data.isVip == "1";
                this.myInfoVo = res.data;
                this.model1.userInfo.phone = res.data?.phonenumber;
            });
        },
        getLast() {
            getLastOrderApi().then((res) => {
                if (res.data) {
                    this.model1.userInfo.station = res.data.stationName;
                    this.model1.userInfo.stationId = res.data.stationId;
                    this.model1.userInfo.address = res.data.address;
                }
            });
        },
        getTime() {
            getTimeApi().then((res) => {
                this.columns = res.data.columns;
                this.columnData = res.data.columnData;
            });
        },
        confirm(e) {
            this.model1.userInfo.deliveryTime = e.value[0] + " " + e.value[1];
            this.showTime = false;
        },
        handleStationConfirm(e) {
            this.model1.userInfo.station = e.value[0].nickName;
            this.model1.userInfo.stationId = e.value[0].userId;
            this.showStation = false;
        },
        /**
         * 处理选择变化事件
         */
        change(e) {
        },
        // 获取驿站列表
        getStationList() {
            getStationListApi().then((res) => {
                this.stationList = [res.data];
            });
        },
        handleConfirm() {
            this.$refs.uForm.validate().then((res) => {
                this.model1.userInfo.couponId = this.couponId;
                if (this.isWaiter == "1") {
                    this.model1.userInfo.waiterId = null;
                    this.model1.userInfo.waiterName = null;
                }
                if (this.payType == 1) {
                    postAddOrderTopUpApi(this.model1.userInfo).then((res) => {
                        if (res.code == 200) {
                            xcxTopUp(
                                res.data.price,
                                res.data.goodsOrderId,
                                "goods",
                                "下单"
                            ).then((res) => {
                                if (res) {
                                    this.showOrder = false;
                                    //延迟两秒
                                    setTimeout(() => {
                                        uni.navigateTo({
                                            url: "/pages/order/index?type=1",
                                        });
                                    }, 1500);
                                }
                            });
                        }
                    });
                    //微信支付
                }
                if (this.payType == 2) {
                    //余额支付
                    postAddOrderApi(this.model1.userInfo).then((res) => {
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                        });
                        if (res.code == 200) {
                            subscribe(["ILyPPtKVkWDgrHRhg8ReZnqVdnLjlABSL6jQig7X3ec"]).then(
                                (res) => {
                                    this.showOrder = false;
                                    //延迟两秒
                                    setTimeout(() => {
                                        uni.navigateTo({
                                            url: "/pages/order/index?type=1",
                                        });
                                    }, 1500);
                                }
                            );
                        }
                    });
                }
            });
        },
        // 获取地址
        handleGetAddress() {
            getAddress().then((res) => {
                this.model1.userInfo.address = res;
            });
        },
        // 付款方式
        handlePayConfirm(e) {
            this.payWay = e.value[0].label;
            this.payWayId = e.value[0].id;
            this.showPay = false;
        },
        goKf() {
            wx.openCustomerServiceChat({
                extInfo: {url: "https://work.weixin.qq.com/kfid/kfc94f7f122e00029ff"},
                corpId: "ww946e84db1faa17ae",
                success(res) {
                    console.log(2222, res);
                },
                fail(res) {
                    console.log(333, res);
                },
            });
        },

        handleSearch(){
            this.getList()
        },
        getList() {
            // this.queryObj.typeIds = this.typeList[this.activeIndex].businessConfigId;
            this.queryObj.typeIds= this.goods.oneTypeId,
            getUserListApi(this.queryObj).then((res) => {
                this.list = res.rows;
            });
        },
        handleChoose(item){
            this.model1.userInfo.waiterName = item.nickName;
            this.model1.userInfo.waiterId = item.userId;
            this.showWaiter=false
        }
    },
};
</script>

<style lang="scss" scoped>
.waiter-card {
    //display: flex;
    //align-items: center;
    padding: 20rpx;
    // margin-bottom: 20rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    border: 1rpx solid #eeeeee;

    .avatar-container {
        position: relative;
        margin-right: 20rpx;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }

        .online-icon {
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    .info-container {
        flex: 1;
        display: flex;
        flex-direction: column;

        .name {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 8rpx;
        }

        .title {
            font-size: 26rpx;
            color: #666666;
            margin-bottom: 8rpx;
        }
    }

}
.book-btn {
    width: 130rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #ffffff;
    background-color: #716AF8;
    border-radius: 30rpx;
    margin: 0;
    padding: 0;
}

.item {
    margin-bottom: 20rpx;
    padding: 30rpx 40rpx;
    background-color: #fff;
    // border-radius: 20rpx;
    .name {
        display: flex;
        justify-content: space-between;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.taobao-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 120rpx;

    .goods-info {
        background: #fff;
        padding: 20rpx;
        margin-bottom: 20rpx;

        .price {
            color: #f44;
            font-size: 36rpx;
            font-weight: bold;

            .vip-price {
                margin-left: 10rpx;
                background-color: #f44;
                color: #fff;
                border-radius: 4rpx;
                width: fit-content;
                padding: 0 10rpx;
                font-size: 30rpx;
                // margin: 10rpx 0;
            }

            .original {
                color: #999;
                text-decoration: line-through;
                font-size: 24rpx;
                margin-left: 10rpx;
            }
        }

        .title {
            font-size: 32rpx;
            line-height: 1.5;
            margin: 10rpx 0;
            font-weight: 700;
        }

        .sales {
            font-size: 24rpx;
            color: #999;
        }

        .desc {
            color: #333;
            font-size: 28rpx;
            margin: 10rpx 0;
        }
    }

    .detail-section {
        background: #fff;
        padding: 20rpx;

        .title {
            font-size: 28rpx;
            padding: 20rpx 0;
            //   border-bottom: 1rpx solid #eee;
        }
    }

    .footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120rpx;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

        .btn {
            height: 88rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 44rpx;
            font-size: 28rpx;
            font-weight: 500;
            margin: 0 10rpx;
            padding: 0 20rpx;
            border: none;
            transition: all 0.2s;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

            &:active {
                transform: translateY(2rpx);
                box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
            }

            &.cart {
                flex: 2;
                background: linear-gradient(to right, #ffb347, #ff976a);
                color: #fff;
                text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);

                &:active {
                    background: linear-gradient(to right, #ffa030, #ff8747);
                }
            }

            &.buy {
                flex: 2;
                background: linear-gradient(to right, #ff4d4d, #f44);
                color: #fff;
                text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);

                &:active {
                    background: linear-gradient(to right, #ff3333, #e60000);
                }
            }
        }

        .contact {
            display: flex;
            flex: 1;
            padding: 0 30rpx;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #666;
        }
    }
}

::v-deep .u-modal__content {
    padding: 20rpx 0 !important;
}

::v-deep .u-form {
    //width: 80% !important;
}

.item-box {
    display: flex;
    align-items: center;
    line-height: 80rpx;

    .logo {
        margin-right: 10rpx;
    }
}

.select-box {
    // height: 80rpx;
    margin-left: 10rpx;
    line-height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;

    .pay-box {
        display: flex;
        align-items: center;
    }
}

.bottom {
    padding: 40rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    //width:calc(100% - 40rpx);
    //background: #d6ecec;
    background: #ffffff;
    border-top-right-radius: 20rpx;
    border-top-left-radius: 20rpx;
    z-index: 9;
}

.coupon-container {
    padding: 20rpx;
    // background-color: #f7f7f7;
    max-height: 70vh;

    .header {
        padding: 30rpx 0;
        text-align: center;

        .title {
            font-size: 36rpx;
            font-weight: bold;
            display: block;
        }

        .subtitle {
            font-size: 24rpx;
            color: #999;
        }
    }

    .coupon-list {
        // padding-right: 100rpx;
        .coupon-item {
            position: relative;
            display: flex;
            margin-bottom: 20rpx;
            height: 140rpx;
            background: linear-gradient(to right, #ff4e4e, #ff7e7e);
            border-radius: 12rpx;
            overflow: hidden;
            color: #fff;

            &.disabled {
                background: linear-gradient(to right, #cccccc, #dddddd);
            }

            .coupon-left {
                width: 220rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-right: 2rpx dashed rgba(255, 255, 255, 0.3);

                .amount {
                    font-size: 46rpx;
                    font-weight: bold;
                    line-height: 1;
                }

                .unit {
                    font-size: 28rpx;
                    margin-top: 10rpx;
                }

                .condition {
                    font-size: 22rpx;
                    margin-top: 10rpx;
                }
            }

            .coupon-right {
                flex: 1;
                padding: 20rpx;
                display: flex;
                flex-direction: column;

                .name {
                    font-size: 28rpx;
                    font-weight: bold;
                }

                .time,
                .scope {
                    font-size: 22rpx;
                    margin-top: 10rpx;
                    color: rgba(255, 255, 255, 0.8);
                }

                .get-btn {
                    position: absolute;
                    right: 20rpx;
                    bottom: 20rpx;
                    width: 160rpx;
                    height: 50rpx;
                    line-height: 50rpx;
                    background-color: #fff;
                    color: #ff4e4e;
                    border-radius: 25rpx;
                    font-size: 24rpx;
                    padding: 0;

                    &.disabled {
                        background-color: #dddddd;
                        color: #999;
                    }
                }
            }

            .coupon-corner {
                position: absolute;
                top: 0;
                left: 200rpx;
                width: 40rpx;
                height: 40rpx;
                background-color: #f7f7f7;
                border-radius: 0 0 40rpx 0;
            }

            .coupon-dots {
                position: absolute;
                left: 200rpx;
                top: 40rpx;
                bottom: 0;
                width: 20rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .dot {
                    width: 8rpx;
                    height: 8rpx;
                    background-color: #f7f7f7;
                    border-radius: 50%;
                }
            }
        }
    }
}

.info-item-top {
    display: flex;
    align-items: center;

    .nickname-box {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;

        .nickname {
            font-size: 30rpx;
            margin-right: 10rpx;
            font-weight: 600;
        }
    }
}

.createTimeStr {
    color: #999;
    font-size: 24rpx;
}

.content {
    .content-text {
        margin-top: 10rpx;
        margin-left: 5rpx;
        font-size: 30rpx;
        //字间距
        // letter-spacing: 1rpx;
        margin-bottom: 10rpx;
    }

    .bottom {
        display: flex;
    }
}

.title {
    display: flex;
    align-items: center;

    .level {
        color: #999;
        font-size: 28rpx;
        margin-left: 20rpx;
        color: #f56c6c;
    }
}
</style>
